<template>
  <div>
   <!-- 查询区域 -->
   <el-form :model="searchForm" :rules="searchRules" ref="searchFormRef">
      <el-form-item label="库存商品名称" prop="inventoryProductName" >
        <el-input v-model="searchForm.inventoryProductName" placeholder="请输入库存商品名称" style="width: 200px" />
      </el-form-item>
      <el-form-item label="库存商品规格" prop="inventoryProductSpec">
        <el-input v-model="searchForm.inventoryProductSpec" placeholder="请输入库存商品规格" style="width: 200px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="inventoryProductId" label="库存商品ID" />
    <el-table-column prop="inventoryProductName" label="库存商品名称" />
    <el-table-column prop="inventoryProductSpec" label="库存商品规格" />
    <el-table-column prop="warehouseAreaCode" label="仓库区域编码" />
    <el-table-column prop="warehouseAreaName" label="仓库区域名称" />
    <el-table-column prop="storageAreaCode" label="库区编码" />
    <el-table-column prop="storageLocationCode" label="库位编码" />
    <el-table-column prop="upperLimitNum" label="库位上限数量" />
    <el-table-column prop="lowerLimitNum" label="库位下限数量" />
    <el-table-column prop="currentNum" label="库位当前数量" />
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-message :show="deleteMsg" type="success">{{ deleteMsg }}</el-message>
   <!-- 编辑对话框 -->
   <el-dialog v-model="editDialogVisible" title="编辑库存信息" width="600px">
    <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px">
      <el-form-item label="库存商品ID" prop="inventoryProductId">
        <el-input v-model="editForm.inventoryProductId" disabled />
      </el-form-item>
      <el-form-item label="库存商品名称" prop="inventoryProductName">
        <el-input v-model="editForm.inventoryProductName" />
      </el-form-item>
      <el-form-item label="库存商品规格" prop="inventoryProductSpec">
        <el-input v-model="editForm.inventoryProductSpec" />
      </el-form-item>
      <el-form-item label="仓库区域编码" prop="warehouseAreaCode">
        <el-input v-model="editForm.warehouseAreaCode" />
      </el-form-item>
      <el-form-item label="仓库区域名称" prop="warehouseAreaName">
        <el-input v-model="editForm.warehouseAreaName" />
      </el-form-item>
      <el-form-item label="库区编码" prop="storageAreaCode">
        <el-input v-model="editForm.storageAreaCode" />
      </el-form-item>
      <el-form-item label="库位编码" prop="storageLocationCode">
        <el-input v-model="editForm.storageLocationCode" />
      </el-form-item>
      <el-form-item label="库位上限数量" prop="upperLimitNum">
        <el-input v-model.number="editForm.upperLimitNum" />
      </el-form-item>
      <el-form-item label="库位下限数量" prop="lowerLimitNum">
        <el-input v-model.number="editForm.lowerLimitNum" />
      </el-form-item>
      <el-form-item label="库位当前数量" prop="currentNum">
        <el-input v-model.number="editForm.currentNum" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleEditSubmit">确定</el-button>
    </template>
  </el-dialog>
</div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
const tableData = ref([
  {
    inventoryProductId: 'PID001',
    inventoryProductName: '商品A',
    inventoryProductSpec: '规格1',
    warehouseAreaCode: 'WH001',
    warehouseAreaName: '总仓一区',
    storageAreaCode: 'A01',
    storageLocationCode: 'L001',
    upperLimitNum: 200,
    lowerLimitNum: 20,
    currentNum: 150
  },
  {
    inventoryProductId: 'PID002',
    inventoryProductName: '商品B',
    inventoryProductSpec: '规格2',
    warehouseAreaCode: 'WH002',
    warehouseAreaName: '总仓二区',
    storageAreaCode: 'B01',
    storageLocationCode: 'L002',
    upperLimitNum: 150,
    lowerLimitNum: 15,
    currentNum: 100
  },
  {
    inventoryProductId: 'PID003',
    inventoryProductName: '商品C',
    inventoryProductSpec: '规格3',
    warehouseAreaCode: 'WH003',
    warehouseAreaName: '分仓一区',
    storageAreaCode: 'C01',
    storageLocationCode: 'L003',
    upperLimitNum: 300,
    lowerLimitNum: 30,
    currentNum: 200
  },
  {
    inventoryProductId: 'PID004',
    inventoryProductName: '商品D',
    inventoryProductSpec: '规格4',
    warehouseAreaCode: 'WH004',
    warehouseAreaName: '分仓二区',
    storageAreaCode: 'D01',
    storageLocationCode: 'L004',
    upperLimitNum: 250,
    lowerLimitNum: 25,
    currentNum: 180
  },
  {
    inventoryProductId: 'PID005',
    inventoryProductName: '商品E',
    inventoryProductSpec: '规格5',
    warehouseAreaCode: 'WH005',
    warehouseAreaName: '配送仓',
    storageAreaCode: 'E01',
    storageLocationCode: 'L005',
    upperLimitNum: 180,
    lowerLimitNum: 18,
    currentNum: 120
  }
]);


// 搜索相关
const searchForm = reactive({
  inventoryProductName: '',
  inventoryProductSpec: ''
});
const filteredTableData = ref(tableData.value);

const handleSearch = () => {
  filteredTableData.value = tableData.value.filter(item => {
    const nameMatch = item.inventoryProductName.includes(searchForm.inventoryProductName);
    const specMatch = item.inventoryProductSpec.includes(searchForm.inventoryProductSpec);
    return nameMatch && specMatch;
  });
};

const resetSearch = () => {
  searchForm.inventoryProductName = '';
  searchForm.inventoryProductSpec = '';
  filteredTableData.value = tableData.value;
};



const deleteMsg = ref('');

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    // 过滤删除数据
    tableData.value = tableData.value.filter(item => item.inventoryProductId !== row.inventoryProductId);
    ElMessage.success('删除成功');
    // deleteMsg.value = '删除成功';

    // setTimeout(() => {
    //   deleteMsg.value = '';
    // }, 1500);
  } catch (error) {
    // 用户取消删除
  }
};

// 编辑相关
const editDialogVisible = ref(false);
const editForm = reactive({
  inventoryProductId: '',
  inventoryProductName: '',
  inventoryProductSpec: '',
  warehouseAreaCode: '',
  warehouseAreaName: '',
  storageAreaCode: '',
  storageLocationCode: '',
  upperLimitNum: 0,
  lowerLimitNum: 0,
  currentNum: 0
});
const editFormRef = ref();
const editRules = reactive({
  inventoryProductName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  inventoryProductSpec: [{ required: true, message: '请输入商品规格', trigger: 'blur' }],
  // 其他字段按需添加校验规则
});

// 打开编辑对话框
const handleEdit = (row) => {
  editDialogVisible.value = true;
  editForm.inventoryProductId = row.inventoryProductId;
  editForm.inventoryProductName = row.inventoryProductName;
  editForm.inventoryProductNameAnother = row.inventoryProductNameAnother;
  editForm.inventoryProductSpec = row.inventoryProductSpec;
  editForm.warehouseAreaCode = row.warehouseAreaCode;
  editForm.warehouseAreaName = row.warehouseAreaName;
  editForm.storageAreaCode = row.storageAreaCode;
  editForm.storageLocationCode = row.storageLocationCode;
  editForm.upperLimitNum = row.upperLimitNum;
  editForm.lowerLimitNum = row.lowerLimitNum;
  editForm.currentNum = row.currentNum;
};

// 编辑提交
const handleEditSubmit = () => {
  editFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟后端请求，这里直接更新表格数据
      tableData.value = tableData.value.map(item => {
        if (item.inventoryProductId === editForm.inventoryProductId) {
          ElMessage.success('编辑成功');
          return { ...item, ...editForm };
        }
        return item;
      });
      editDialogVisible.value = false;
    }
  });
};



</script>

<style scoped>
/* 可根据需求添加表格样式 */
.el-table {
  margin-top: 20px;
}
</style>

  